<template>
  <span><input type="checkbox" :checked="chk" @change="$emit('change', $event.target.checked)"/>{{value}}</span>
</template>

<script>
export default {
  name: 'myCheckbox',
  model:{
    prop: 'chk',
    event: 'change'
  },
  props: {
    chk: Boolean,
    value: String,
    bus: {
      type: Object,
      required: false,
      default: null
    }
  },
  mounted:function () {
    if(this.bus != null){
        this.bus.$on('change',function (val) {
          console.log('Received change event from Counter, val = ' + val);
        })
    }
  },
  methods:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
